import * as React from 'react'
import {FlowLinkLayerWidget} from "./FlowLinkLayerWidget"


export class DirectedLinkLayerWidget extends FlowLinkLayerWidget {
    render () {
        const diagramModel = this.props.diagramEngine.getDiagramModel()
        const zoom = diagramModel.getZoomLevel()
        const offsetX = diagramModel.getOffsetX()
        const offsetY = diagramModel.getOffsetY()
        const svgStyle = {
            transform: `scale(${zoom / 100.0}) translate(${offsetX}px, ${offsetY}px)`,
            width: '100%',
            height: '100%',
        }

        const arrow =(
            <defs>
                <marker id="arrowMarker" markerWidth="30" markerHeight="30" refX="0" refY="10" orient="auto" markerUnits="userSpaceOnUse">
                    <path d="M0,0 L0,20 L30,10 z" style={{fill:"#000000"}} />
                </marker>
            </defs>
        )
        return (
            <svg style={svgStyle}>
                {arrow}
                {this.generateLinks()}
            </svg>
        )
    }
}
